import React, { useMemo, useState } from 'react';
import { getMessage } from '@inbiz/react';
import { InbizIcon } from '@inbiz/utils';
import { Button, Modal, ModalProps } from 'antd';
import { CloseOutlined } from '@ant-design/icons';
import cls from 'classnames';
import { TablePrefixCls } from '../../shared';
import './style.less';

export interface FullModalProps extends ModalProps {
  name?: string;
  onClose?: () => void;
  render?: React.ReactNode;
  top?: number;
  move?: boolean;
}

const FullModal = (props: FullModalProps) => {
  const { prefixCls = TablePrefixCls, name, className, onClose, width, style, ...rest } = props;
  const [full, setFull] = useState(false);

  const styles = useMemo(() => {
    return full ? { ...style, height: '100%', maxHeight: '100%', left: 0, top: 0 } : { ...style };
  }, [full]);

  return (
    <Modal
      className={cls(`${prefixCls}-full-modal`, className)}
      style={styles}
      width={full ? window.innerWidth : width}
      title={
        <div className={`${prefixCls}-full-modal-title`}>
          {getMessage(name)}
          <div className={`${prefixCls}-full-modal-header-btn-wrapper`}>
            <Button
              key={'fullScreen'}
              type={'text'}
              title={full ? getMessage('Table.reduction') : getMessage('Table.fullScreen')}
              icon={
                full ? <InbizIcon type="icon-huanyuan" /> : <InbizIcon type="icon-ic-zuidahua" />
              }
              onClick={() => setFull(!full)}
            />
            <Button
              key={'close'}
              type={'text'}
              title={getMessage('Table.close')}
              icon={<CloseOutlined />}
              onClick={() => onClose?.()}
            />
          </div>
        </div>
      }
      afterClose={() => setFull(false)}
      {...rest}
    >
      {props?.render}
    </Modal>
  );
};

export default React.memo(FullModal);
